<!--  -->
<template>
  <div class="enterprise_box">
    <div class="box_mail">
      <Container
        title="楼宇动态"
        @jump="$router.push({ path: '/investment/investmenDynamictList' })"
        :isBold="true"
      >
        <template>
          <div class="content_box">
            <div
              v-if="dynamicsObj"
              class="con-left"
              @click="caseDetail(dynamicsObj)"
            >
              <div class="img">
                  <PublicImage
                    v-if="!dynamicsObj.logo"
                    :src="require('@/assets/image/finance/product_dj.png')"
                  ></PublicImage>
                  <PublicImage
                    v-else
                    :src="dynamicsObj.logo"
                  ></PublicImage>
              </div>
              <div class="left-cart">
                <div class="time">{{ dynamicsObj.publishTime }}</div>
                <div class="p1 ellipsis">{{ dynamicsObj.title }}</div>
                <div class="p2 ellipsistwo">
                  <!-- <pre v-html="dynamicsObj.subtitle"></pre> -->
                  {{ dynamicsObj.subtitle }}
                </div>
                <div class="p3 ellipsis">来源:{{ dynamicsObj.source }}</div>
              </div>
            </div>
            <div class="con-right">
              <div
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="caseDetail(item)"
                style="cursor: default"
              >
                <div class="item-left">
                  <div class="time">{{ item.publishTime }}</div>
                  <div class="p1 ellipsis">{{ item.title }}</div>
                  <div class="p2 ellipsistwo" style="font-size: 12px">
                    <!-- <pre v-html="item.subtitle"></pre> -->
                    {{ item.subtitle }}
                  </div>
                  <p class="p3">></p>
                </div>
                <div class="item-right">
                  <PublicImage
                    v-if="!item.logo"
                    :src="require('@/assets/image/finance/product_dj.png')"
                  ></PublicImage>
                  <PublicImage
                    v-else
                    :src="item.logo"
                  ></PublicImage>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Container>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import { getDynamicsList } from "@/common/api/investment"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  name: "index_dynamics",
  data() {
    //这里存放数据
    return {
      list: [],
      dynamicsObj: null,
      pageNum: 1,
      pageSize: 4,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    caseDetail(item) {
      if (item) {
        this.$router.push({
          path: "/investment/investmenDynamictDetails",
          query: { id: item.id },
        });
      }
    },
    // 列表
    async getDynamicsList() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let { code, msg, rows, total } = await getDynamicsList(obj)
      if (code != "200") return this.$message.warning(msg);
      rows.forEach((item) => {
        if (item.publishTime) {
          item.publishTime = item.publishTime
            .split(" ")[0]
            .replace(/-/g, ".");
        }
      })
      let arr = rows.splice(0, 1);
      this.dynamicsObj = arr[0];
      this.list = rows;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDynamicsList();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.enterprise_box {
  background-image: url("~@/assets/image/investment/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 443px; */
  height: 714px;
  background-position: center top;
  overflow: hidden;
}
.enterprise_box .box_mail {
  width: 1200px;
  margin: 30px auto 0 auto;
}
.title {
  font-weight: 700;
}
.enterprise_box .box_mail .title_box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}
.enterprise_box .box_mail .title_box .title {
  flex: 1;
  text-align: center;
  font-size: 32px;
  color: #045db9;
}
.enterprise_box .box_mail .title_box .more {
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}
.enterprise_box .box_mail .content_box {
  display: flex;
  justify-content: space-between;
  .con-left {
    width: 540px;
    background: #ffffff;
    height: 530px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
    text-align: left;
    .img {
      width: 100%;
      height: 362px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .left-cart {
      flex: 1;
      padding: 18px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      font-weight: bold;
      .time {
        color: #bbbbbb;
        margin: 0px 0 17px 0;
        font-size: 16px;
      }
      .p1 {
        font-size: 22px;
        color: #045db9;
        // line-height: 18px;
        margin-bottom: 15px;
      }
      .p2 {
        line-height: 18px;
        color: #333;
        font-size: 14px;
      }
      .p3 {
        text-align: right;
        margin-top: 10px;
        color: #666;
        font-size: 14px;
        line-height: 18px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      }
    }
  }
  .con-right {
    width: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item {
      height: 160px;
      display: flex;
      text-align: left;
      border: 1px solid #eeeeee;

      .time {
        font-size: 16px;
        font-weight: bold;
        color: #bbbbbb;
        margin-bottom: 18px;
      }
      .p1 {
        font-size: 18px;
        line-height: 24px;
      }
      .p2 {
        font-size: 12px;
      }
      .p3 {
        font-size: 20px;
        margin-top: 5px;
      }

      .item-left {
        padding: 26px 28px;
        flex: 1;
        box-sizing: border-box;
        width: 358px;
      }
      .item-right {
        width: 260px;
        img {
          width: 260px;
          height: 159px;
        }
      }
    }
    .item:hover {
      background: linear-gradient(-58deg, #0c2fb0 0%, #215fea 100%);
      color: #ffffff;
      .time {
        color: #ffff;
      }
    }
  }
}
</style>